<html>
<head>
	<title>Embedded images</title>
	<!--%mhtml%-->
	<!-- Sets the basepath for the library if not in same directory -->
	<script type="text/javascript">
		mxBasePath = '/mxgraph/javascript/src';
	</script>

	<!-- Loads and initializes the library -->
	<script type="text/javascript" src="/mxgraph/javascript/src/js/mxClient.js"></script>

	<!-- Example code -->
	<script type="text/javascript">
		// True if data URIs are supported. IE8 has a size limit of 32KB for
		// data URIs, so this must be used as a global size limit. It's not
		// possible to work around this limitation by using MHTML because that
		// is not supported in IE8.
		var DATA_URL = %dataUrl%;
		var graph = new mxGraph();
		var bundle = new mxImageBundle(!DATA_URL);

		function insert(name, data, fallback)
		{
			bundle.putImage(name, data, fallback);
			var parent = graph.getDefaultParent();
			graph.insertVertex(parent, null, '', 100, 20, 130, 80, 'shape=image;image=' + name);
		};
	
		// Program starts here. Creates a sample graph in the
		// DOM node with the specified ID. This function is invoked
		// from the onLoad event handler of the document (see below).
		function main()
		{
			%bundle%
			graph.addImageBundle(bundle);
			graph.init(document.getElementById('graphContainer'));
			graph.setConnectable(true);
			
			// Enables rubberband selection
			new mxRubberband(graph);
			
			// Gets the default parent for inserting new cells. This
			// is normally the first child of the root (ie. layer 0).
			var parent = graph.getDefaultParent();
							
			// Adds cells to the model in a single step
			graph.getModel().beginUpdate();
			try
			{
				graph.insertVertex(parent, null, '', 20, 20, 30, 30, 'shape=image;image=myImage');
			}
			finally
			{
				// Updates the display
				graph.getModel().endUpdate();
			}

			// Three scenarios for loading embedded images in IE6/7:
			// 1. At load-time: Embed in HTML page (see above and server-side)
			// 2. From URL at runtime: Use script to encode and cache response. This is also needed for
			//    browsers that support HTML5 canvas because it's not possible to base64 encode an image
			//    from another domain due to security restrictions.
			var url = 'http://www.jgraph.com/images/mxgraph.gif';
			mxUtils.get(window.location.href + '?url=' + encodeURIComponent(url), function(req)
			{
				var lines = req.getText().split('\n');
				var data = '';
				
				// Scans the response for base64 encoded image data
				for (var i = 6; i < lines.length; i++)
				{
					if (lines[i].length == 0)
					{
						data = lines[i + 1];
						break;
					}
				}
				
				data = data.substring(0, data.length - 1);

				// The fallback can either be the URL or the MHTML URL which turns the image
				// into MHTML on the server-side. Both are cached so even if the image changes
				// while the diagram is open the image will remain visible. Note that the image
				// will be replaced with an embedded image the next time the diagram is opened.
				//url = 'mhtml:' + window.location.href + '?url=' + encodeURIComponent(url) + '!image';
				insert(url, 'data:image/gif,' + data, url);
			});

			// 3. From local at runtime: Requires two roundtrips, one to get the base64 encoded
			//    string to put it into the bundle and another (in IE6/7) for the mhtml href.
			//    The response of the POST request contains JavaScript which calls the insert
			//    method above and removes the dynamically generated iframe with the form (below).
			var clickHandler = function()
			{
				if (document.getElementById('embedimageframe') == null)
				{
					var ifrm = document.createElement('iframe');
					ifrm.setAttribute('id', 'embedimageframe');
					document.body.appendChild(ifrm);
					ifrm = (ifrm.contentWindow) ? ifrm.contentWindow :
						(ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
		            ifrm.document.open();
		            ifrm.document.write('<form method="POST" enctype="multipart/form-data" '+
				    	'action="' + window.location.href + '">');
		            ifrm.document.write('File: <input type="file" name="upfile">');
		            ifrm.document.write('<input type="hidden" name="dataurl" value="' + DATA_URL + '">');
		            ifrm.document.write('<br><input type="submit" value="Insert">');
		            ifrm.document.write('</form>');
		            ifrm.document.close();
				}
			};

			document.body.appendChild(mxUtils.button('Insert image', clickHandler));
			mxUtils.br(document.body);
		};
	</script>
</head>
<body onload="main()">
	<div id="graphContainer"
		style="overflow:hidden;width:320px;height:240px;border:solid black 1px;cursor:default;">
	</div>
</body>
</html>
